<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="mobile-web-app-capable" content="yes">
  <link rel="icon" type="image/png" href="mediasoup.png" />
  <title>Mediasoup Sample App</title>
</head>
<style>
  body {
    font: .9rem arial, serif;
  }
  table {
    width: 100%;
    max-width: 800px;
  }
  table td {
    width: 33.33%;
    vertical-align: top;
  }
  fieldset {
    min-height: 100%;
    border: 1px solid silver;
    padding: 10px;
  }
  button {
    padding: 5px;
    margin: 5px;
  }
  video {
    width: 100%;
  }
  span {
    font-family: monospace;
  }
</style>
<body>
  <table>
    <tr>
      <td>
        <div>Local</div>
        <video id="local_video" controls autoplay playsinline></video>
      </td>
      <td>
        <div>Remote</div>
        <video id="remote_video" controls autoplay playsinline></video>
      </td>
    </tr>
  </table>
  <br>
  <table>
    <tr>
      <td>
        <fieldset id="fs_connection">
          <legend>Connection</legend>
          <div><button id="btn_connect">Connect</button> <span id="connection_status"></span></div>
        </fieldset>
      </td>
      <td>
        <fieldset id="fs_publish" disabled>
          <legend>Publishing</legend>
          <div><label><input type="checkbox" id="chk_simulcast"> Use Simulcast</label></div>
          <div>
            <button id="btn_webcam">Start Webcam</button>
            <span id="webcam_status"></span>
          </div>
          <div>
            <button id="btn_screen">Share Screen</button>
            <span id="screen_status"></span>
          </div>
        </fieldset>
      </td>
      <td>
        <fieldset id="fs_subscribe" disabled>
          <legend>Subscription</legend>
          <div><button id="btn_subscribe">Subscribe</button> <span id="sub_status"></span></div>
        </fieldset>
      </td>
    </tr>
  </table>
</body>
<script>
  // window.localStorage.setItem('debug', 'mediasoup-client:WARN* mediasoup-client:ERROR*');
  window.localStorage.setItem('debug', 'mediasoup-client:*');
</script>
<script type="text/javascript" src="app-bundle.js"></script>
</html>
